<script setup lang="ts">
    import { Plus } from '@element-plus/icons-vue'

    const mainStore = useMainStore();

    const isHoverAddWrapper: Ref<boolean> = ref(false);
</script>

<template>
    <div :class="$style.svgStackSidebar">
        <div v-if="mainStore.svgStack.length === 0" :class="[$style.aloneAdd, 'center_flex']">
            <el-button type="primary" :icon="Plus" circle @click="() => mainStore.addElementToStack()" />
        </div>

        <div v-else :class="$style.stack">
            <div :class="$style.addWrapper" @mouseenter="isHoverAddWrapper = true" @mouseleave="isHoverAddWrapper = false">
                <Transition name="fadeUp">
                    <el-button v-if="isHoverAddWrapper" type="primary" :icon="Plus" circle @click="() => mainStore.addElementToStack()" />
                </Transition>
            </div>

            <SVGStack />
        </div>
    </div>
</template>

<style module>
.svgStackSidebar {
    --el-color-primary: var(--main-color);

    position: relative;
    background-color: #ffffff;
    box-shadow: 1px 0px 5px #d4d4d4;

    width: 300px;
    height: 100%;
    padding: 5px 10px;

    z-index: 2;
    overflow-y: scroll;
}

.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
}

.aloneAdd {
    height: 100%;
    width: 100%;
}

.addWrapper {
    width: 100%;
    height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>